<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="views/include :: header('添加Api')"/>
    <meta name="toTop" content="true">
    <link rel="stylesheet" th:href="@{/plugins/editormd/css/editormd.css}"/>
    <script th:src="@{/plugins/editormd/editormd.min.js}"></script>
    <script th:src="@{/plugins/editormd/lib/prettify.min.js}"></script>
    <script th:src="@{/plugins/editormd/lib/underscore.min.js}"></script>
    <script th:src="@{/plugins/editormd/lib/marked.min.js}"></script>
    <script th:src="@{/plugins/editormd/lib/raphael.min.js}"></script>
    <script th:src="@{/plugins/editormd/lib/sequence-diagram.min.js}"></script>
    <script th:src="@{/plugins/editormd/lib/flowchart.min.js}"></script>
    <script th:src="@{/js/toTop.js}"></script>
</head>
<body>
<div class="layuimini-container">
    <div id='toTop'><img src='/img/top.png'></div>
    <div class="layuimini-main ">
        <div class="layui-form layuimini-form layui-form-pane">
            <div class="layui-form-item">
                <div class="layui-input-inline" style="width: 500px">
                    <label class="layui-form-label required layui-bg-blue layui-btn-fluid">标题:</label>
                    <div class="layui-input-block">
                        <input type="text" th:name="title" lay-verify="required" lay-reqtext="标题不能为空"
                               placeholder="请输入标题" class="layui-input" autocomplete="off"
                               th:value="${apidetail!=null?apidetail.title:''}">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label required layui-bg-blue">目录:</label>
                    <div class="layui-input-inline" style="width: 500px;text-align: left">
                        <select th:name="categoryId">
                            <option value="">请选择所属分类</option>
                            <span th:each="list:${treeSelectVos}">
    <div th:switch="${apidetail != null }">
        <div th:case="true"> <option th:value="${list.id}" th:text="${list.name}"  th:selected="${list.id == apidetail.categoryId  }"></option></div>
         <div th:case="false"> <option th:value="${list.id}" th:text="${list.name}"> </option>  </div>
    </div>

                                    <span th:if="${not  #lists.isEmpty(list.children) || list.children=='null'}">
                                        <optgroup th:label="${list.name}" style="margin-left: 20px">
                                            <span th:each="child:${list.children}">


                                                    <div th:switch="${apidetail != null }">
                                                         <div th:case="false"> <option th:value="${child.id}" th:text="${child.name}"> </option>  </div>
                                                        <div th:case="true"> <option th:value="${child.id}" th:text="${child.name}"  th:selected="${child.id == apidetail.categoryId  }"></option></div>
                                                    </div>


                                            </span>

                                        </optgroup>
                                        <hr>
                                    </span>
                                </span>
                        </select>

                    </div>
                </div>


            </div>
            <input type="hidden" th:name="categoryName" id="categoryName"
                   th:value="${apidetail!=null?apidetail.categoryName:''}">

            <input type="hidden" th:name="apidetailId" id="apidetailId"
                   th:value="${apidetail!=null?apidetail.apidetailId:''}">

            <div class="layui-form-item">
                <div class="layui-input-inline" style="width: 200px">
                    <button class="layui-btn  " data-type="add_api" id="add_api">
                        <i class="layui-icon layui-icon-list"></i> 插入API接口模板
                    </button>
                </div>
                <div class="layui-input-inline" style="width: 200px">
                    <button class="layui-btn  " data-type="add_data" id="add_data">
                        <i class="layui-icon layui-icon-read"></i> 插入数据字典模板
                    </button>
                </div>
                <div class="layui-input-inline" style="width: 200px">
                    <button class="layui-btn " data-type="add_more" id="add_more">
                        <i class="layui-icon layui-icon-template-1"></i> 更多模板
                    </button>
                </div>
                <div class="layui-input-inline" style="width: 200px;text-align: right">
                    <button class="layui-btn layuiadmin-btn-role " data-type="show_version" id="show_version">
                        <i class="layui-icon layui-icon-about"></i> 历史版本
                    </button>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="editormd" id="test-editormd">
                        <textarea class="editormd-markdown-textarea" name="context"
                                  th:text="${apidetail!=null?apidetail.context:'欢迎使用wwDoc'}">
                        </textarea>
                    <!-- 第二个隐藏文本域，用来构造生成的HTML代码，方便表单POST提交，这里的name可以任意取，后台接受时以这个name键为准 -->
                    <textarea class="editormd-html-textarea" th:name="contextHtml"></textarea>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-input-inline" style="width: 200px">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>
                    </div>
                </div>
                <div class="layui-input-inline" style="width: 200px">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveTemplate">另存为模板
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="layuimini-container" id="more_table" hidden>
    <div class="layuimini-main">
        <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn  layui-btn-sm" lay-event="edit"><i class="layui-icon">&#xe642;</i>插入此模板</a>
    <a class="layui-btn layui-btn-danger  layui-btn-sm" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>


<script>

    layui.use(['form', 'table', 'layer', 'treeSelect'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            table = layui.table,
            treeSelect = layui.treeSelect;

        form.render();

        let editor;
        $(function () {
            editor = editormd("test-editormd", {
                width: "100%",
                height: 640,
                syncScrolling: "single",
                tex: true, // 开启科学公式TeX语言支持，默认关闭
                flowChart: true, // 开启流程图支持，默认关闭
                path: "/plugins/editormd/lib/",
                tocm: true, // Using [TOCM]
                saveHTMLToTextarea: true,   //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
                /* 上传图片配置 */
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "/FileUpload/fileUpload", //注意你后端的上传图片服务地址
                //自定义工具栏
                /* toolbarIcons : function() {
                     return ["undo","redo","|","bold","italic","quote","uppercase","lowercase","|","h1","h2","h3","h4","|","list-ul","list-ol","hr","|","link","image","code","code-block","table","html-entities","|","watch","preview","fullscreen","clear","|","help"]
                 },*/

            });
        });

        /*  treeSelect.render({
              // 选择器
              elem: '#tree',
              // 数据
              data: '/apidetail/getTreeSelectVos',
              // 异步加载方式：get/post，默认get
              type: 'post',
              // 占位符
              // placeholder: '请选择所属目录',
              // 是否开启搜索功能：true/false，默认false
              search: true,
              // 一些可定制的样式
              style: {
                  folder: {
                      enable: true
                  },
                  line: {
                      enable: true
                  }
              },
              // 点击回调
              click: function (d) {
                  $("#categoryTree").val(d.current.id);
                  $("#categoryName").val(d.current.name);
              },
              style: {
                  folder: {enable: false},
                  line: {enable: true}
              },
              success: function (d) {

                  console.log(d);
                  var treeObj = treeSelect.zTree('tree');
                  console.log(treeObj);
                  treeSelect.checkNode('tree', 13);
  //                选中节点，根据id筛选
                  console.log("---" + $('#tree').val());
  //                获取zTree对象，可以调用zTree方法

  //                刷新树结构
              }
          });*/


        let index;
        let active = {
            add_api: function () {
                $.ajax({
                    url: "/template/selectTemplate?temId=1",
                    type: "post",
                    success: function (data) {
                        if (data.code === 0) {
                            layer.msg(data.msg);
                            editor.insertValue(data.data.context);
                        } else {
                            layer.msg(data.msg, {
                                icon: 5,
                                time: 2000
                            });
                        }
                    }
                });
            },
            add_data: function () {
                $.ajax({
                    url: "/template/selectTemplate?temId=2",
                    type: "post",
                    success: function (data) {
                        if (data.code === 0) {
                            layer.msg(data.msg);
                            editor.insertValue(data.data.context);
                        } else {
                            layer.msg(data.msg, {
                                icon: 5,
                                time: 2000
                            });
                        }
                    }
                });
            },
            add_more: function () {
                table.reload('munu-table', {});
                index = layer.open({
                    title: "查看自定义模板",
                    content: $("#more_table"),
                    type: 1,
                    area: ['690px', '500px']
                });
            },
            show_version: function () {

            }
        };

        table.render({
            elem: '#munu-table',
            url: '/template/selectTemplateByUser', //数据接口
            page: true,
            limit: 10,
            limits: [10, 20, 30],
            cols: [
                [
                    {
                        title: "保存时间", field: "createTime", width: 180, align: "center",
                        templet: function (d) {
                            if (d.createTime != null) {
                                return layui.util.toDateString(d.createTime);
                            }
                            return '';
                        }
                    },
                    {title: "模板标题", field: "title", width: 200, align: "center"},
                    {title: "操作", templet: '#auth-state', width: 250, align: 'center',}
                ]
            ]
        });


        //监听工具条
        table.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.confirm('确认删除此模板吗？', function (index) {
                    $.ajax({
                        url: '/template/deleteOne',
                        data: {"tempId": data.templateId},
                        type: 'post',
                        dataType: 'json',
                        success: function (data) {
                            if (data.code == 0) {
                                layer.msg(data.msg, {
                                    offset: '15px',
                                    icon: 6,
                                    time: 1000
                                }, function () {
                                    table.reload('munu-table', {});
                                });
                            } else {
                                layer.msg(data.msg, {
                                    icon: 5,
                                    time: 2000
                                });
                            }
                        }, error: function (data) {
                            layer.msg("操作失败", {time: 1000, icon: 5});
                        }
                    });
                });
            } else if (layEvent === 'edit') {
                editor.insertValue(data.context);
                layer.close(index);
                layer.msg("插入成功");
            }
        });


        //监听提交
        form.on('submit(saveBtn)', function (data) {
            const index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            //获取getMarkdown文本内容
            // alert(editor.getMarkdown());
            console.log(data.field);
            $.ajax({
                url: "/apidetail/addApi",
                data: data.field,
                type: "post",
                //4.接收后台修改响应回来的数据；关闭弹出层、提示修改信息、刷新table
                success: function (data) {
                    if (data.code === 0) {
                        layer.msg(data.msg, {
                            offset: '15px',
                            icon: 6,
                            time: 2000
                        }, function () {
                            window.location.href = '/apidetail/toAPIList';

                        });
                    } else {
                        layer.msg(data.msg, {
                            icon: 5,
                            time: 2000
                        });
                    }
                }
            });
            return false;//阻止跳转；
        });

        //监听提交
        form.on('submit(saveTemplate)', function (data) {
            const index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            $.ajax({
                url: "/template/addTemplate",
                data: data.field,
                type: "post",
                //4.接收后台修改响应回来的数据；关闭弹出层、提示修改信息、刷新table
                success: function (data) {
                    if (data.code === 0) {
                        layer.msg(data.msg, {
                            offset: '15px',
                            icon: 6,
                            time: 2000
                        });
                    } else {
                        layer.msg(data.msg, {
                            icon: 5,
                            time: 2000
                        });
                    }
                }
            });
            return false;//阻止跳转；
        });

        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>